<template>
  <div style="background-color: white">
    <el-row style="padding-top: 10px;padding-bottom: 10px">
      <el-col :span="3" style="padding-left: 10px">
        <el-select
          v-model="page"
          size="mini"
          placeholder="默认显示"
          @change="selectPage"
        >
          <el-option
            v-for="item in change"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >

          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3" :offset="8" style="width:150px">
        <el-date-picker
          v-model="startTime"
          type="date"
          format="yyyy-MM-dd"
          placeholder="开始时间"
          value-format="yyyy-MM-dd"
          size="mini"
          :picker-options="pickerOptions1"
          style="width:150px;margin: 0 0 0 10px"
          @change="initOptions2"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="3" style="width:150px;padding-left: 10px">
        <el-date-picker
          v-model="endTime"
          type="date"
          format="yyyy-MM-dd"
          placeholder="结束时间"
          value-format="yyyy-MM-dd"
          size="mini"
          :disabled="startTime == ''"
          :picker-options="pickerOptions2"
          style="width:150px"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="3" style="width:150px;padding-left: 10px">
        <el-select
          v-model='deviceType'
          placeholder="所有设备"
          size="mini"
          style="width:150px"
          @focus="getDeviceTypes"
          append-to-body
        >
          <el-option
            v-for="item in deviceTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >

          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2" style="padding-left: 10px">
        <el-select
          v-model="block"
          placeholder="区域块"
          size="mini"
          @focus="getBlocks"
        >
          <el-option
            v-for="item in blocks"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2" style="padding-left: 10px">
        <el-button size="mini" @click="statistics">
          统计
        </el-button>
      </el-col>
    </el-row>
    <hr class="boundary">
    <statistics-dialog
      :showDialog="showDialog"
      :block="block"
      :blockName="blockName"
      :deviceType="deviceType"
      :deviceTypeName="deviceTypeName"
      :startTime="startTime"
      :endTime="endTime"
      @closeModel="closeModel"></statistics-dialog>
  </div>
</template>
<script>
  import Vue from 'vue'
  import statisticsDialog from "./statisticsDialog";
  import Axios from "axios"

  export default {
    components: {
      statisticsDialog
    },
    props:{
      page:''
    },
    data() {
      // this.typeArr = ['line','histogram','pie']
      this.extend = {
        'xAxis.0.axisLabel.rotate': 45
      };
      return {
        showDialog: false,
        change: [
          {
            value: '/admin/statistics/byDevice',
            label: '默认显示'
          },
          {
          value: '/admin/statistics/byDevice/monthly',
          label: '按月统计显示'
        },
          {
            value: '/admin/statistics/byDevice/quarterly',
            label: '按季度统计显示'
          },
          {
            value: '/admin/statistics/byDevice/year',
            label: '按年统计显示'
          }],
        startTime: '',
        endTime: '',
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() >= Date.now() - 8.64e6;
          }
        },
        pickerOptions2: {},
        totalEC: 4396,
        radio: 'line',

        block: '',
        blockName: '',
        blocks: [],

        deviceType: '',
        deviceTypeName: '',
        deviceTypes: [],

        tableData: [],
        chartData: {
          columns: [],
          rows: []
        },

        xMonth: {1:31,2:28,3:31,4:30,5:31,6:30,7:31,8:31,9:30,10:31,11:30,12:31},
        yMonth: {1:31,2:29,3:31,4:30,5:31,6:30,7:31,8:31,9:30,10:31,11:30,12:31}
      }
    },
    methods:{
      selectPage(){
        this.$router.push(this.page)
      },
      initOptions2($event) {
        //设置结束时间时间范围
        console.log($event);
        console.log(Date.parse($event));
        this.pickerOptions2 = {
          disabledDate(time) {
            return time.getTime() < Date.parse($event) + 8.64e6;
          }
        };
      },
      showStatistics(){
        console.log(this.showDialog)
        this.showDialog = true
      },
      closeModel(){
        this.showDialog = false;
        this.block = ''
        this.deviceType = ''
        this.startTime = ''
        this.endTime = ''
        this.blockName= ''
        this.deviceTypeName= ''
        console.log(this.showDialog)
      },

      getBlocks(){
        this.block = ''
        this.blocks = []
        Axios.get(this.api + 'block/getBlocks',{
          headers:{'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          console.log(res.data.length)
          for (let i = 0;i<res.data.length;i++){
            this.blocks.push({label:res.data[i].name,value:res.data[i].id})
          }
        }).catch(()=>{
          console.log('请求失败！')
        })
      },

      getDeviceTypes(){
        this.deviceType = ''
        this.deviceTypes = []
        Axios.get(this.api+'types',{
          headers:{'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          console.log(res.data)
          for (let i = 0;i<res.data.length;i++){
            this.deviceTypes.push({label:res.data[i].name,value:res.data[i].id})
          }
        })
      },

      statistics(){
        let self = this
        let date = new Date()
        let i = 10
        let day = date.getDate()
        let month = date.getMonth()
        let year = date.getFullYear()
        if(self.startTime ===''){
          console.log(date) //Thu Oct 22 2020 16:38:57 GMT+0800 (中国标准时间)
          if (day-i <= 0 && month <= 0) {
            self.startTime = (year-1) + '-' + month + '-' + (self.xMonth[12]+day-i)
          } else if (day-i <= 0 && month === 2 && (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0)) {
            self.startTime = year + '-' + month + '-' + (self.yMonth[month]+day-i)
          } else if (day-i <= 0) {
            self.startTime = year + '-' + month + '-' + (self.xMonth[month]+day-i)
          } else {
            self.startTime = year + '-' + (month+1) + '-' + (day - i)
          }
          self.endTime = year + '-' + (month+1) + '-' + day //2020-10-22
        }
        console.log('startTime:'+self.startTime)
        console.log('endTime:'+self.endTime)
        if (this.deviceType!==''){
          Axios.get(this.api+'type',{
            params:{'id':this.deviceType},
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            withCredentials: true
          }).then(res => {
            console.log('-_-'+res.data)
            this.deviceTypeName = res.data
          })
        }
        if (this.block!==''){
          Axios.get(this.api+'block',{
            params:{'id':this.block},
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            withCredentials: true
          }).then(res => {
            console.log('-_-'+res.data[0].name)
            this.blockName = res.data[0].name
          })
        }
        this.showStatistics()
      }
    }
  }
</script>

<style>
  .el-scrollbar__wrap{
    height: 90%;
    overflow-x: hidden;
  }
  /*.scrollbar-wrap{*/
  /*  overflow-x: hidden;*/
  /*}*/
</style>
